<%--
  Created by IntelliJ IDEA.
  User: LLS
  Date: 2020/1/3
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>表单预览外部数据控件表格映射</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .layui-input, .layui-select, .layui-textarea {
            height: 25px;
        }
    </style>
</head>
<body>
<div class="layui-form" id="Inquire" style="margin-top: 5px;">
    查询条件:
</div>
<table id="demo" lay-filter="test"></table>

<script type="text/javascript">
    // 获取地址栏参数值
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var data_fld_name,data_table_name,data_db_id,data_field,data_control,data_querys,terpid;
    var id="DATA_"+getQueryString("id");

    if (getQueryString('apph5')){
        data_fld_name=parent.$('#'+id).attr('data_fld_name').split(',');
        data_table_name=parent.$('#'+id).attr('data_table_name'); //表名
        data_db_id=parent.$('#'+id).attr('data_db_id'); //库
        data_field=parent.$('#'+id).attr('data_field').split(',');
        data_control=parent.$('#'+id).attr('data_control').split(',');
        data_querys=parent.$('#'+id).attr('data_querys').split(',');
    }else {
         data_fld_name=$('#'+id,opener.document).attr('data_fld_name').split(',');
         data_table_name=$('#'+id,opener.document).attr('data_table_name'); //表名
        data_db_id=$('#'+id,opener.document).attr('data_db_id'); //库
         data_field=$('#'+id,opener.document).attr('data_field').split(',');
         data_control=$('#'+id,opener.document).attr('data_control').split(',');
         data_querys=$('#'+id,opener.document).attr('data_querys').split(',');
    }
    terpid=$('#'+id,opener.document).attr('terpid');
    var cols=[[]]; //表格列头
    var table ;
    //设置列头
    for(var i=0;data_fld_name.length>i;i++){
        if (data_fld_name[i]!=''){
            var obj=new Object();
            obj['field']=data_field[i];
            obj['title']=data_fld_name[i];
            obj['align']='center';
            obj['data_control']=data_control[i];
            cols[0].push(obj);
        }
    }
    //添加操作列头
    var obj2={
        title:'操作',
        align:'center',
        templet:function (d) {
            return '<button type="button" class="layui-btn layui-btn-xs" lay-event="AddTo"><i class="layui-icon layui-icon-add-1"></i>添加</button>';
        }
    };
    cols[0].push(obj2);

    var ce=0;
    //设置查询字段
    for (var j=0;data_querys.length>j;j++){
        if (data_querys[j]==='1'){
            var seach='<div style="display:inline">\n' +
                '        '+data_fld_name[j]+'\n' +
                '        <div class="layui-input-inline" style="margin-top: 0px;">\n' +
                '            <input type="text" name="'+data_field[j]+'" placeholder="请输入" class="layui-input">\n' +
                '        </div>\n' +
                '    </div>';
            $('#Inquire').append(seach);
            ce++;
        }
    }
    if (ce===0){
        $('#Inquire').append('未设置查询条件');
    }else{
        $('#Inquire').append('<div style="display:inline">\n' +
            '        <div class="layui-input-inline" style="margin-top: 0px;">\n' +
            '           <button type="button" class="layui-btn layui-btn-xs" onclick="quire(this)">查询</button>' +
            '        </div>\n' +
            '    </div>');
    }

    //查询按钮点击事件
    function quire(d) {
        var obj=new Object();
        $('#Inquire input').each(function(index,item){
            obj[ $(this).attr('name')]=$(this).val();
        });
        table.reload('demo', {
            where: { //设定异步数据接口的额外参数，任意设
                strjson:JSON.stringify(obj)
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        })
    }

    layui.use(['table'], function(){
        table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,method:"post"
            ,url: '/TerpServerController/selectTerpServer' //数据接口
            ,where:{
                tableName:data_table_name,
                dbDataBaseName:data_db_id,
                serverId:terpid
            }
            ,page: true //开启分页
            ,cols: cols
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.totleNum, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
        });

        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'AddTo'){ //添加
                for (var i=0 ;cols[0].length-1>i;i++){
                    if (getQueryString('apph5')){
                        var dis=parent.$('[title="'+cols[0][i].data_control+'"]').attr('disabled');
                        if (dis===undefined) {
                            parent.$('[title="' + cols[0][i].data_control + '"]').val(data[(cols[0][i].field)]);
                        }
                        parent.closesAll();
                    }else {
                        var dis=$('[title="'+cols[0][i].data_control+'"]',opener.document).attr('disabled');
                        if (dis===undefined){
                            $('[title="'+cols[0][i].data_control+'"]',opener.document).val(data[(cols[0][i].field)]);
                        }
                        window.close();
                    }
                }
            }
        });

    });
</script>
</body>
</html>
